<template>
 	<view class="item-container grid2" :class="theme" hover-class="hover" @tap="$emit('click')">
 		<!-- <view class="item-container grid2" :class="theme" hover-class="hover" @tap="showData"> -->
 		<!-- <image class="p-tag" src="@/static/new.png" v-if="tag == 'new'"></image> -->
 		<view class="thumb-c">
 			<image class="p-tag" :class="'location-' + info.image_tag.location" :src="info.image_tag.image"
 				v-if="info.image_tag"></image>
 			<image mode="widthFix" :src="info.thumb" class="thumb"></image>
 			<view class="presell-c" v-if="info.is_presell">预售</view>
 		</view>
 		<view class="body">
 			<view class="title">{{info.title}}</view>
 			<view class="bottom">
 				<view class="tag">{{tagString}}</view>
 				<view class="price">
 					<view>
						<PriceDisplay :info="info"></PriceDisplay>
					</view>
					<view class="sales">已售{{info.sales|bigNumberDisplay}}</view>
 				</view>
 			</view>
 		</view>
 	</view>
 </template>

 <script>
 	export default {
 		props: {
 			info: {
 				type: Object,
 				default () {
 					return {}
 				}
 			},
 			tag: {
 				type: String
 			},
 			theme: {
 				type: String,
 				default () {
 					return 'default-theme'
 				}
 			}
 		},
 		data() {
 			return {}
 		},

 		computed: {
 			tagString() {
 				return this.info && this.info.tags && this.info.tags[0] || '创意热销'
 			}
 		},
 		methods: {
 			showData() {
 				console.log(this.info, ' this.info')
 			}
 		}
 	}
 </script>

 <style lang="scss" scoped>
 	.item-container {
 		// width: 328rpx;
 		// height: 460rpx;
 		border-radius: 30rpx 30rpx 20rpx 20rpx;
 		overflow: hidden;
 		margin-bottom: 28rpx;
 		box-shadow: 0px 14px 30px 0px rgba(226, 222, 204, 0.1);
 		position: relative;

 		.thumb-c {
 			position: relative;
 			background: #F2F2F2;

 			.thumb {
 				width: 100%;
 				height: 330rpx;
 				display: block;

 				image-rendering: -moz-crisp-edges;

 				image-rendering: -o-crisp-edges;

 				image-rendering: -webkit-optimize-contrast;

 				image-rendering: crisp-edges;

 				-ms-interpolation-mode: nearest-neighbor;
 			}

 			.presell-c {
 				position: absolute;
 				width: 100%;
 				text-align: center;
 				background: rgba(230, 49, 17, 0.5);
 				color: white;
 				left: 0rpx;
 				bottom: 0rpx;
 				font-size: 24rpx;
 				padding: 6rpx 0rpx;
 			}

 			.p-tag {
 				position: absolute;
 				width: 100rpx;
 				height: 100rpx;
 				top: 0rpx;

 				// 右上角
 				&.location-1 {
 					right: 0rpx;
 				}

 				// 右上角
 				&.location-2 {
 					left: 0rpx;
 				}
 			}
 		}


 		.body {
 			background: white;
 			padding: 12rpx 21rpx 10rpx 21rpx;
 			box-sizing: border-box;

 			.title {
 				font-size: 30rpx;
 				font-weight: 500;
 				color: #000000;

 				overflow: hidden;
 				text-overflow: ellipsis;
 				display: -webkit-box;
 				-webkit-line-clamp: 1;
 				-webkit-box-orient: vertical;
 			}

 			.tag {
 				height: 36rpx;
 				background: #F7F7F7;
 				border-radius: 50rpx;
 				font-size: 22rpx;
 				font-weight: bold;

 				font-weight: 500;
 				color: #FF294A;
 				line-height: 36rpx;
 				padding: 0rpx 12rpx;
 				max-width: 180rpx;
 				display: inline;


 				overflow: hidden;
 				text-overflow: ellipsis;
 				// display: -webkit-box;
 				-webkit-line-clamp: 1;
 				-webkit-box-orient: vertical;
 			}

 			.price {
 				// text-align: right;
 				font-size: 30rpx;
 				font-weight: 800;
 				color: #DE1124;
 				display: flex;
 				justify-content: space-between;

 				
 			}
			
			.sales {
				font-size: 22rpx;
				font-family: DINOT;
				font-weight: 400;
				color: #B2B2B2;
				line-height: 40rpx;
			}
 		}
 	}

 	.theme-1 {
 		height: 400rpx;

 		.body {
 			border-radius: 20rpx;
 			overflow: hidden;
 			position: relative;
 			top: -30rpx;

 			.bottom {
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
 			}
 		}
 	}
 </style>
